<template>
	<view class="index p10">
		<!--简洁 -->
		<view class="f-1 bff1 box">
			<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm">
				<u-form-item label="规格组名称:" prop="name" ref="item1" labelWidth="100px" :required="true" borderBottom>
					<u--input placeholder="请输入规格组名称" border="none" v-model="form.name" placeholderClass="init"
						:customStyle="{padding:' 15px 10px ',background:'#fff',borderRadius:'16rpx'}"></u--input>
				</u-form-item>
				<u-form-item label="加价规格:" prop="price" ref="item1" labelWidth="100px" :required="true" borderBottom>
					<view class="gaodu">
						<u-radio-group v-model="form.is_sku">
							<u-radio v-for="(item, index) in is_skulist" :key="index" :name="item.id">
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</view>

				</u-form-item>
				<u-form-item label="" prop="price" ref="item1" labelWidth="0" borderBottom>
					<u-button type="primary" :customStyle="{margin: '20rpx',color:'#000',}" text="添加规格" color="#ffaa00"
						:plain="true" shape="circle" size="medium" @click="additem">
					</u-button>
				</u-form-item>
				<u-form-item label="" prop="attr_name_list" ref="item1" labelWidth="100px" borderBottom>
					<scroll-view class="scroll f-1 bf8 db" scroll-y="true">
						<view v-for="(item,i) in form.attr_name_list" :key="i" class="flex">
							<u--input placeholder="请输入规格名称" border="none" v-model="item.name" placeholderClass="init"
								:customStyle="{padding:' 15px 10px ',background:'#fff',borderRadius:'16rpx',width:'60%'}"></u--input>
							<u-button type="primary" :customStyle="{margin: '20rpx',color:'#000',width:'30%'}" text="删除"
								color="#ffaa00" :plain="true" shape="circle" size="medium" @click="deleteitem(i)">
							</u-button>
						</view>
					</scroll-view>
				</u-form-item>
			</u--form>
		</view>

		<!-- 按钮 -->
		<view class="mt10">
			<u-button type="primary" :loading="loading" :customStyle="{color:'#000'}" :plain="true" text="确定"
				color="#0055ff" @click="submit()">
			</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				form: {
					name: '',
					is_sku: 0,
					attr_name_list: []
				},
				is_skulist: [{
					name: '非加价规格',
					id: 0
				}, {
					name: '是加价规格',
					id: 1
				}, ],
				rules: {
					name: [{
						required: true,
						message: '请输入规格组名称',
						trigger: ['blur'],
					}, ],
				},
				addAndEditType: 0,
				info_id: '',
				loading: false,
			}
		},
		onLoad(option) {
			if (option.id) {
				this.info_id = option.id;
				if (this.info_id != '') {
					this.getInfo();
				}
			}
		},
		watch: {

		},
		methods: {
			additem() {
				this.form.attr_name_list.push({
					name: ''
				});
			},
			deleteitem(i){
				this.form.attr_name_list.splice(i, 1);
			},
			async getInfo() {
				let {
					code,
					data,
					msg
				} = await this.beg.request({
					url: '/admin/product.Attr/getInfo',
					method: 'POST',
					data: {
						id: this.info_id,
					},
				})
				if (code == 1) {
					data.attr_name_list = data.attr_name_list;
					let attr_name_list = [];
					data.attr_name_list.forEach((v) => {
						attr_name_list.push({name:v});
					})
					data.attr_name_list = attr_name_list;
					this.form = data;
				} else {
					uni.$u.toast(msg)
				}
			},
			checkboxChange(e) {
				this.form.attr_name_list = e.detail.value;
			},

			submit() {
				if (this.form.attr_name_list.length == 0) {
					uni.$u.toast('请添加规格')
					return;
				}else{
					let status=false;
					this.form.attr_name_list.forEach((v)=>{
						if(v.name==''){
							status=true;
							return;
						}
					})
					if(status){
						uni.$u.toast('请检查规格填写是否正确')
						return;
					}
				}
				this.$refs.uForm.validate().then(res => {
					let data = {};
					Object.assign(data, this.form);
					let attr_name_list = [];
						this.form.attr_name_list.forEach((vv) => {
							attr_name_list.push(vv.name);
						})
					data.attr_name_list = attr_name_list;
					this.postData(data);
				}).catch(errors => {
					uni.$u.toast('请填写完整的信息')
				})
			},
			async postData(data) {
				this.loading = true;
				let {
					code,
					msg
				} = await this.beg.request({
					url: '/admin/product.Attr/save',
					method: 'POST',
					data: data,
				})
				if (code == 1) {
					uni.$u.toast(msg);
					setTimeout(() => {
						this.returnIndex();
					}, 1000)
				} else {
					this.loading = false;
					uni.$u.toast(msg)
				}

			},
			//返回
			returnIndex() {
				this.loading = false;
				uni.navigateBack({
					delta: 1
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		background-color: #fff;
		padding: 20rpx;
		line-height: 1.5;
		position: relative;
		margin-top: 20rpx;
		border-radius: 20rpx;



		.prid {
			font-weight: bold;
			font-size: 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.jiao {
				right: 10rpx;

				.jiaohang {
					display: flex;
					align-items: center;

					.rijianju {
						margin-right: 10rpx;
					}
				}
			}
		}

		.prod {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20rpx;
		}

		.prname {
			width: 80%;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}

		.price {
			width: 20%;
			text-align: right;
		}
	}

	.scroll {
		height: 50vh;
		background-color: #fff;
	}

	/deep/.u-form-item__body {
		padding: 0px;
	}

	.gaodu {
		height: 100rpx;
		display: flex;
		align-items: center;
	}
</style>